<template>
  <div class="message-board">
    <p class="title">{{ walltype[wallid].name }}</p>
    <p class="slogan">{{ walltype[wallid].slogan }}</p>
    <div class="label">
      <p class="label-list" :class="{ labelselect: allselect == -1 }" @click="selecttype(-1)">全部</p>
      <p class="label-list" :class="{ labelselect: allselect == index }" v-for="(item, index) in label[wallid]"
        :key="index" @click="selecttype(index)">{{ item }}</p>
    </div>
    <div>
      <card></card>
    </div>
  </div>

</template>
<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue'
import { walltype, label } from '../utils/data.js';
import card from '../components/Card.vue'
let wallid = ref(0);
let allselect = ref(-1);
const selecttype = (index) => {
  allselect.value = index
}
</script>
<style lang="scss" scoped>
.message-board {
  padding-top: 52px;
  min-height: 700px;

  .title {
    font-size: 56px;
    color: $gray-0;
    text-align: center;
    font-weight: 600;
    padding-top: 46px;
    padding-bottom: 8px;
  }

  .slogan {
    font-size: $size-14;
    color: $gray-1;
    text-align: center;
    font-weight: 400;
  }

  .label {
    margin-top: 44px;
    display: flex;
    justify-content: center;

    .label-list {
      padding: 0 14px;
      line-height: 28px;
      margin: 4px;
      color: #5B5B5B;
      cursor: pointer;
    }

    .labelselect {
      border: 1px solid rgba(32, 32, 32, 1);
      border-radius: 14px;
      font-weight: 600;
      color: #202020;
    }
  }
}
</style>
